<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!--    <title>专家评级</title>-->
    <title>骨龄专家标定</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/css-all.css?v=2"/>
    <link rel="stylesheet" href="css/index.css"/>
    <link rel="stylesheet" href="css/addon.css"/>
    <script src="js/prim/edit.js"></script>
    <style>
        .jumbotron{
            background-color: #C0E0E5;
        }
        h3{
            line-height: 100px;
        }
        h5{
            color: #17A2B8;
            font-weight:100
        }
        h4{
            color: #17A2B8;
        }
        .button {
            background-color: #17A2B8;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
        input{
            outline-style: none ;
            border: 1px solid #17A2B8;
            border-radius: 3px;
            width: 40px;
            font-size: 19px;
            font-family: inherit;
            font-weight: 100;
            color: #17A2B8;
            background-color: #C0E0E5;
            height: 23px;
        }
        .row {
            background-color: white;
        }
    </style>
</head>
<body>
<div th:include="expert/expertHead::expertHead"></div>

<div class="detail-body">
    <div class="main-page" id="print">
        <div class="count-div" style="margin:0">
            <div class="para-block" style="clear:left;">
                <div style="height: 30px;margin-bottom: 20px">
                    <!--                    <img src="img/shengao.png" width="20"><span class="title">专家审核</span>-->
                    <img src="img/shengao.png" width="20"><span class="title">骨龄专家标定</span>
                </div>

                <div style="width:100%;height:2px;background:rgba(229,229,229,1);"></div>

                <div style="margin-top: 30px;height:780px;overflow: hidden">
                    <div style="width:55%;float:left;">
                        <div style="margin:0 0 10px 0;">
                            <div style="display: inline-block;width:10px;height:10px;background:linear-gradient(90deg,rgba(59,167,255,1),rgba(105,169,254,1));border-radius:50%;"></div>
                            <span style="color:rgba(102,102,102,1);font-weight:bold;margin-left: 10px">骨龄片</span>
                        </div>
                        <figure class="figure center-block" style="margin: 0px auto;display: table;">
                            <img th:src="${url}" src="image/dicom_bg.jpg" class="figure-img img-fluid rounded center-block" height="550" width="550" alt="dicom图像">
                            <figcaption class="figure-caption text-center">用户的骨龄片</figcaption>
                        </figure>
                    </div>
                    <div style="float:left;width: 22%;margin-top: 40px">
                        <h4 align="center">AI评级</h4>
                        <hr align=center color=#17A2B8>
                        <div class="container" >
                            <div class="row clearfix">
                                <div class="col-md-2 column"></div>
                                <div class="col-md-10 column">
                                    <table>
                                        <tr>
                                            <td><h5 th:text="'桡骨：' + ${aiRecog.getRaoScore()}">桡骨：</h5></td>
                                        </tr>
                                        <tr>
                                            <td><h5 th:text="'头状骨：' + ${aiRecog.getTouScore()}">头状骨：</h5></td>
                                        </tr>
                                        <tr>
                                            <td><h5 th:text="'钩骨：' + ${aiRecog.getGouScore()}">钩骨：</h5></td>
                                        </tr>
                                        <tr>
                                            <td><h5 th:text="'尺骨：' + ${aiRecog.getGouScore()}">尺骨：</h5></td>
                                        </tr>
                                        <tr>
                                            <td><h5 th:text="'掌骨1：' + ${aiRecog.getZhang1Score()}">掌骨1：</h5></td>
                                        </tr>
                                        <tr>
                                            <td><h5 th:text="'掌骨3：' + ${aiRecog.getZhang3Score()}">掌骨3：</h5></td>
                                        </tr>
                                        <tr>
                                            <td><h5 th:text="'掌骨5：' + ${aiRecog.getZhang5Score()}">掌骨5：</h5></td>
                                        </tr>
                                        <tr>
                                            <td><h5 th:text="'近节指骨1：' + ${aiRecog.getJin1Score()}">近节指骨1：</h5></td>
                                        </tr>
                                        <tr>
                                            <td><h5 th:text="'近节指骨3：' + ${aiRecog.getJin3Score()}">近节指骨3：</h5></td>
                                        </tr>
                                        <tr>
                                            <td><h5 th:text="'近节指骨5：' + ${aiRecog.getJin5Score()}">近节指骨5：</h5></td>
                                        </tr>
                                        <tr>
                                            <td><h5 th:text="'中节指骨3：' + ${aiRecog.getZhong3Score()}">中节指骨3：</h5></td>
                                        </tr>
                                        <tr>
                                            <td><h5 th:text="'中节指骨5：' + ${aiRecog.getZhong5Score()}">中节指骨5：</h5></td>
                                        </tr>
                                        <tr>
                                            <td><h5 th:text="'远节指骨1：' + ${aiRecog.getYuan1Score()}">远节指骨1：</h5></td>
                                        </tr>
                                        <tr>
                                            <td><h5 th:text="'远节指骨3：' + ${aiRecog.getYuan3Score()}">远节指骨3：</h5></td>
                                        </tr>
                                        <tr>
                                            <td><h5 th:text="'远节指骨5：' + ${aiRecog.getYuan5Score()}">远节指骨5：</h5></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="float:right;width: 22%;margin-top: 40px">
                        <h4 align="center">专家评级</h4>
                        <hr align=center color=#17A2B8>
                        <div class="container">
                            <div class="row clearfix">
                                <div class="col-md-2 column"></div>
                                <div class="col-md-10 column">
                                    <!--value值应为AI评级值-->
                                    <table>
                                        <tr>
                                            <td><h5>桡骨：</h5></td>
                                            <td><h5><input type="number" min="0" max="8" th:value="${exRecog.getRaoScore()}" id="rao"></h5></td>
                                        </tr>
                                        <tr>
                                            <td><h5>头状骨：</h5></td>
                                            <td><h5><input type="number" min="0" max="8" th:value="${exRecog.getTouScore()}" id="tou"></h5></td>
                                        </tr>
                                        <tr>
                                            <td><h5>钩骨：</h5></td>
                                            <td><h5><input type="number" min="0" max="8" th:value="${exRecog.getGouScore()}" id="gou"></h5></td>
                                        </tr>
                                        <tr>
                                            <td><h5>尺骨：</h5></td>
                                            <td><h5><input type="number" min="0" max="8" th:value="${exRecog.getChiScore()}" id="chi"></h5></td>
                                        </tr>
                                        <tr>
                                            <td><h5>掌骨1：</h5></td>
                                            <td><h5><input type="number"min="0" max="8" th:value="${exRecog.getZhang1Score()}" id="zhang1"></h5></td>
                                        </tr>
                                        <tr>
                                            <td><h5>掌骨3：</h5></td>
                                            <td><h5><input type="number" min="0" max="8" th:value="${exRecog.getZhang3Score()}" id="zhang3"></h5></td>
                                        </tr>
                                        <tr>
                                            <td><h5>掌骨5：</h5></td>
                                            <td><h5><input type="number" min="0" max="8" th:value="${exRecog.getZhang5Score()}" id="zhang5"></h5></td>
                                        </tr>
                                        <tr>
                                            <td><h5>近节指骨1：</h5></td>
                                            <td><h5><input type="number" min="0" max="8" th:value="${exRecog.getJin1Score()}" id="jin1"></h5></td>
                                        </tr>
                                        <tr>
                                            <td><h5>近节指骨3：</h5></td>
                                            <td><h5><input type="number" min="0" max="8" th:value="${exRecog.getJin3Score()}" id="jin3"></h5></td>
                                        </tr>
                                        <tr>
                                            <td><h5>近节指骨5：</h5></td>
                                            <td><h5><input type="number" min="0" max="8" th:value="${exRecog.getJin5Score()}" id="jin5"></h5></td>
                                        </tr>
                                        <tr>
                                            <td><h5>中节指骨3：</h5></td>
                                            <td><h5><input type="number" min="0" max="8" th:value="${exRecog.getZhong3Score()}" id="zhong3"></h5></td>
                                        </tr>
                                        <tr>
                                            <td><h5>中节指骨5：</h5></td>
                                            <td><h5><input type="number" min="0" max="8" th:value="${exRecog.getZhong5Score()}" id="zhong5"></h5></td>
                                        </tr>
                                        <tr>
                                            <td><h5>远节指骨1：</h5></td>
                                            <td><h5><input type="number" min="0" max="8" th:value="${exRecog.getYuan1Score()}" id="yuan1"></h5></td>
                                        </tr>
                                        <tr>
                                            <td><h5>远节指骨3：</h5></td>
                                            <td><h5><input type="number" min="0" max="8" th:value="${exRecog.getYuan3Score()}" id="yuan3"></h5></td>
                                        </tr>
                                        <tr>
                                            <td><h5>远节指骨5：</h5></td>
                                            <td><h5><input type="number" min="0" max="8" th:value="${exRecog.getYuan5Score()}" id="yuan5"></h5></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="float: right;width: 44%;margin-top: 40px;text-align: center">
                        <button class="button" id="calculate">计算骨龄</button>
                    </div>
                </div><br>
                <div class="container">
                    <hr align=center style="border: 1px dashed #17A2B8"><br>
                    <div class="row clearfix">
                        <div class="col-md-3 column">
                            <h4 align="center">AI骨龄：</h4>
                        </div>
                        <div class="col-md-3 column">
                            <h5 th:text="'CHN骨龄：' + ${aiScore.getChnBoneage()}">CHN骨龄：</h5>
                        </div>
                        <div class="col-md-3 column">
                            <h5 th:text="'TW3骨龄：' + ${aiScore.getTw3Boneage()}">TW3骨龄：</h5>
                        </div>
                        <div class="col-md-3 column">
                            <h5 th:text="'TWC骨龄：' + ${aiScore.getTwcBoneage()}">TWC骨龄：</h5>
                        </div>
                    </div><br>
                    <div class="row clearfix">
                        <div class="col-md-3 column">
                            <h4 align="center">专家骨龄：</h4>
                        </div>
                        <div class="col-md-3 column">
                            <h5 id="chn">CHN骨龄：</h5>
                        </div>
                        <div class="col-md-3 column">
                            <h5 id="tw3">TW3骨龄：</h5>
                        </div>
                        <div class="col-md-3 column">
                            <h5 id="twc">TWC骨龄：</h5>
                        </div>
                    </div><br>
                </div>
                <div style="text-align:center">
                    <button id="toReport" class="button" onclick="submit()">生成报告</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/prim/modify.js"></script>
<script th:inline="javascript">
    var taskStr = [[${taskStr}]];
    var recogStr = [[${exRecogIdStr}]];

    var submitButton = document.getElementById("toReport");
    submitButton.onclick = function () {
        submit(taskStr,recogStr);
    }

    var calculate = document.getElementById("calculate");
    calculate.onclick = function () {
        getBoneage(taskStr);
    }
</script>
</body>
</html>